import { lazy, type JSX } from 'react'
import { createBrowserRouter } from 'react-router-dom'

const Home = lazy(()=>import('../pages/Home/index'))
const Login = lazy(()=>import('../pages/Login/index'))
const Detail = lazy(()=>import('../pages/Detail/index'))
const My = lazy(()=>import('../pages/My/index'))
const Error = lazy(()=>import('../pages/Error/index'))
const App = lazy(()=>import('../App'))
const Props = lazy(()=>import('../pages/Props/index'))
const Han = lazy(()=>import('../pages/Props/Han/index'))

type homerouters={
    path:string
    element:JSX.Element
    children?:homerouters
    icon?:any 
    label?:string
}[]

export const tabbar : homerouters=[
    {
        path:'/home',
        element:<Home></Home>,
        icon:'',
        label:'首页'
    },
    {
        path:'/my',
        element:<My></My>,
        icon:'',
        label:'我的'
    },
    {
        path:'/detail/:id',
        element:<Detail></Detail>,
        icon:'',
        label:'详情'
    },
    {
        path:'/props',
        element:<Props></Props>,
        icon:'',
        label:'分类',
        children:[
            {
                path:'/props/han',
                element:<Han></Han>,
                icon:'',
                label:'三级'
            }
        ]
    },
]

const routes : homerouters =[
    {
        path:'/',
        element:<App></App>,
        children:tabbar
    },
    {
        path:'/login',
        element:<Login></Login>,
    },
    {
        path:'*',
        element:<Error></Error>,
    },
]
const router = createBrowserRouter(routes)
export default router